<div id="has-many-{{$column}}" style="margin-top: 15px;">
    <table class="table table-has-many has-many-{{$column}}">
        <thead>
        <tr>
            <th style="max-width: 150px">姓名</th>
            <th>单位</th>
            <th>职称</th>
            <th>承担任务</th>
            <th style="width: 80px"></th>
        </tr>
        </thead>
        <tbody class="has-many-{{$column}}-forms">
        @foreach($list as $key=>$vo)
            @include('admin.participants.template',['column'=>$column,'key'=>$key,'vo'=>$vo])
        @endforeach
        </tbody>
    </table>

    <template class="{{$column}}-tpl">
        @include('admin.participants.template',['column'=>$column,'key'=>null,'vo'=>[]])
    </template>

    <div class="form-group">
        <div class="btn btn-success btn-sm" data-toggle="modal" data-target="#grid-modal-{{ $column }}">
            <div><i class="fa fa-save"></i>&nbsp;{{ trans('admin.new') }}(内)</div>
        </div>
        <div class="add btn btn-success btn-sm" data-type="out">
            <div><i class="fa fa-save"></i>&nbsp;{{ trans('admin.new') }}(外)</div>
        </div>
    </div>

    <div class="modal grid-modal fade" id="grid-modal-{{ $column }}" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document" style="width: 500px;">
            <div class="modal-content" style="border-radius: 5px;height: 300px;margin-top: 200px">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">添加内部人员</h4>
                </div>
                <div class="modal-body">
                    <div class="col-md-12">
                        <div class="form-group  ">
                            <div class="col-sm-8">
                                <select class="form-control username" style="width: 100%;" name="username"
                                        data-value="">
                                    <option value=""></option>
                                </select>
                            </div>
                            <div class="col-sm-3">
                                <div class="add2 btn btn-primary">
                                    <div>&nbsp;添加</div>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-footer"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var index = parseInt("{{count($list)}}");
    var user_obj = $('.username');
    var add_template = function (tpl) {
        index++;
        let template = tpl.replace(/__LA_KEY__/g, index);
        $('.has-many-{{$column}}-forms').append(template);
        user_obj.val(null).trigger("change")
        return false;
    }

    $('#has-many-{{$column}}').on('click', '.add', function () {
        add_template($('template.{{$column}}-tpl').html())
        return false;
    });

    $('#has-many-{{$column}}').on('click', '.add2', function () {

        let uid = user_obj.val();
        if (!uid) {
            layer.msg('请选中成员', {icon: 2, time: 1000});
            return false;
        }

        if ($('input[id="user_id_' + uid + '"]').length > 0) {
            layer.msg('已添加,不能重复添加', {icon: 2, time: 2000})
            user_obj.val(null).trigger("change")
            return false;
        }

        var layer_load = layer.load()
        $.get("{{admin_route('api.participant')}}", {id: uid, column: "{{$column}}"}, function (data) {
            add_template(data)
            layer.msg('添加成功', {icon: 6, time: 2000})
            return false;
        }).fail(function () {
            layer.msg('网络连接失败', {icon: 2, time: 2000})
        }).complete(function () {
            layer.close(layer_load)
        });

        return false;
    });

    $('#has-many-{{$column}}').on('click', '.remove', function () {
        var first_input_name = $(this).closest('.has-many-{{$column}}-form').find('input[name]:first').attr('name');
        if (first_input_name.match('{{$column}}\\[new_')) {
            $(this).closest('.has-many-{{$column}}-form').remove();
        } else {
            $(this).closest('.has-many-{{$column}}-form').hide();
            $(this).closest('.has-many-{{$column}}-form').find('.fom-removed').val(1);
            $(this).closest('.has-many-{{$column}}-form').find('input').removeAttr('required');
        }
        return false;
    });

    $(function () {
        $.fn.modal.Constructor.prototype.enforceFocus = function () {
        };
        user_obj.select2({
            ajax: {
                url: "{{admin_route('api.searchUser',['concat'])}}",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term,
                        page: params.page
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: $.map(data.data, function (d) {
                            d.id = d.id;
                            d.text = d.text;
                            return d;
                        }),
                        pagination: {
                            more: data.next_page_url
                        }
                    };
                },
                cache: true
            },
            "allowClear": true,
            "placeholder": "工号/姓名",
            "minimumInputLength": 1,
            escapeMarkup: function (markup) {
                return markup;
            }
        });
    })

</script>
